<template>
  <a-form ref="basicFormRef" :model="basicState" :rules="configRules">
    <a-form-item label="站长校验码" name="cms_code" class="form-item" :colon="false">
      <a-input
        v-model:value.trim="basicState.cms_code"
        class="w-[160px]"
        :maxlength="30"
        placeholder="请填写站长校验码"
      />
      <div class="form-item-text">
        说明：填写站长运维平台的校验码，定制应用时才能获取到CMS的内容，用于CMS平台与站长身份校验。
      </div>
    </a-form-item>
  </a-form>
  <div class="page-btn">
    <a-button type="primary" :loading="loading" @click="saveBasicPage">保存当前页面</a-button>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { configRules } from '../state'
import apis from '@/apis'
import { message } from 'ant-design-vue'
const {
  system: { get_base, set_base }
} = apis
const basicFormRef = ref()
const loading = ref(false)
interface BasicState {
  cms_code: string
}
const basicState = reactive<BasicState>({
  cms_code: ''
})

const getBase = () => {
  get_base().then((res: any) => {
    console.log(res, '获取基础配置')
    basicState.cms_code = res.cms_code
  })
}
const saveBasicPage = () => {
  basicFormRef.value
    .validate()
    .then(() => {
      console.log(basicState, 'basicState')
      loading.value = true
      set_base(basicState).then((res: any) => {
        message.success('基础配置保存成功')
        loading.value = false
      })
    })
    .catch(() => {
      loading.value = false
    })
}
defineExpose({ getBase })
</script>

<style lang="less" scoped>
.form-item {
  &-text {
    font-size: 12px;
    color: #bfbfbf;
    margin-top: 8px;
  }
}
.page-btn {
  border-top: 1px solid #e8e8e8;
  padding-top: 24px;
}
</style>
